// $(function() {
//     // alert(11);
//     // 1. 按下回车 把完整数据 存储到本地存储里面
//     // 存储的数据格式  let todolist = [{title: "xxx", done: false}]
//     load();
//     $("#title").on("keydown", function(event) {
//         if (event.keyCode === 13) {
//             if ($(this).val() === "") {
//                 alert("请输入您要的操作");
//             } else {
//                 // 先读取本地存储原来的数据
//                 let local = getDate();
//                 // console.log(local);
//                 // 把local数组进行更新数据 把最新的数据追加给local数组
//                 local.push({ title: $(this).val(), done: false });
//                 // 把这个数组local 存储给本地存储
//                 saveDate(local);
//                 // 2. toDoList 本地存储数据渲染加载到页面
//                 load();
//                 $(this).val("");
//             }
//         }
//     });
//     // 3. toDoList 删除操作
//     $("ol, ul").on("click", "a", function() {
//         // alert(11);
//         // 先获取本地存储
//         let data = getDate();
//         console.log(data);
//         // 修改数据
//         let index = $(this).attr("id");
//         console.log(index);
//         data.splice(index, 1);
//         // 保存到本地存储
//         saveDate(data);
//         // 重新渲染页面
//         load();
//     });
//     // 4. toDoList 正在进行和已完成选项操作
//     $("ol, ul").on("click", "input", function() {
//         // alert(11);
//         // 先获取本地存储的数据
//         let data = getDate();
//         // 修改数据
//         let index = $(this).siblings("a").attr("id");
//         console.log(index);
//         // data[?].done = ?
//         data[index].done = $(this).prop("checked");
//         console.log(data);

//         // 保存到本地存储
//         saveDate(data);
//         // 重新渲染页面
//         load();
//     });
//     // 读取本地存储的数据
//     function getDate() {
//         let data = localStorage.getItem("todolist");
//         if (data !== null) {
//             // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
//             return JSON.parse(data);
//         } else {
//             return [];
//         }
//     }
//     // 保存本地存储数据  [{},{},{}]
//     function saveDate(data) {
//         localStorage.setItem("todolist", JSON.stringify(data));
//     }
//     // 渲染加载数据
//     function load() {
//         // 读取本地存储的数据
//         let data = getDate();
//         console.log(data);
//         // 遍历之前先要清空ol里面的元素内容
//         $("ol, ul").empty();
//         let todoCount = 0; // 正在进行的个数
//         let doneCount = 0; // 已经完成的个数
//         // 遍历这个数据
//         $.each(data, function(i, n) {
//             // console.log(n);
//             if (n.done) {
//                 $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
//                 doneCount++;
//             } else {
//                 $("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
//                 todoCount++;
//             }

//         });
//         $("#todocount").text(todoCount);
//         $("#donecount").text(doneCount);

//     }

// })

$(function () {
    load()
    // console.log(1)
    // 肯定是需要个渲染函数专门用来渲染的 因为太多地方的改变都需要重新渲染页面
    function load() {
      $('#todolist').empty()
      $('#donelist').empty()
  
      let todoCount = 0
      let doneCount = 0
      // 遍历数组  数组哪里来？ 本地取呗
      let list = getData()
  
      // 遍历数组
      for (const [i, ele] of list.entries()) {
        // 有多少条数据  就生成多少li
        const li = $(`
        <li data-id=${i}>
           <input type='checkbox' ${ele.done ? 'checked' : ''} />
           <p>${ele.title}</p>
           <a href='javascript:;'></a>
        </li>
        `)
        // 已经生成li了
        // $('#todolist').prepend(li)
        // if (ele.done) {
        //   $('#donelist').append(li)
        //   doneCount++
        // } else {
        //   $('#todolist').append(li)
        //   todoCount++
        // }
        ele.done ? $('#donelist').append(li) && doneCount++ : $('#todolist').append(li) && todoCount++
      }
      //  现在的问题  todo done 怎么分别渲染到各自的列表中去
      $('#todocount').text(todoCount)
      $('#donecount').text(doneCount)
  
    }
    // 获取数据  只要渲染就重新获取最新的本地的数据
    function getData() {
      // let list = localStorage.getItem('jggData')
      // if (list) {
      //   list = JSON.stringify(localStorage.getItem('jggData'))
      // } else {
      //   list = []
      // }
      // console.log(list)
      return JSON.parse(localStorage.getItem('jggData')) || []
    }
    // getData()
    // 存取数据 也是需要的
    function saveData(data) {
      // 你按下enter 创建obj  再obj push你的数组arr去 此时这个arr数组应该是需要存入到本地
      // saveData(arr)
      localStorage.setItem('jggData', JSON.stringify(data))
      console.log(JSON.stringify(data))
    }
  
  
    //  表单输入  按下回车
    $('#title').on('keyup', function (e) {
      if (e.key === 'Enter') {
        if ($(this).val().trim() === '') return alert('请输入信息')
        // 创建一条对象
        const obj = {
          title: $(this).val(),
          done: false
        }
        // 先把本地的数据给我拿过来
        let localData = getData()
        // 把obj 推到数组里面去 并且是第一条
        localData.unshift(obj)
        // console.log(localData)
        // 把这个localData存入到本地去
        saveData(localData)
  
        // 存完之后接着就要来渲染了吧
        load()
        // 重置表单
        $(this).val('')
      }
    })
  
  
    //  input checkbox 状态发生改变的事件
    $('#todolist,#donelist').on('change', 'li>input', function () {
      // console.log(1)
      //  需要去把对应的那一条数据里面的done属性 修改 
      // console.log($(this).parents('li').index())  // 这个索引有大问题 不能用
      let index = $(this).parents('li').data().id
      // console.log($(this).parents('li').data().id)
      // 比如说  第二条数据状态发生改变  就应该是第二条数据被丢到最前面去
      // 修改数据  先拿  在改  再存
      let list = getData()
      // list[$(this).parents('li').data().id].done = $(this).prop('checked')
      const [task] = list.splice(index, 1)
      task.done = !task.done
  
      // 这才是关键 修改的这条数据永远都要丢到最前面去
      list.unshift(task)
  
      saveData(list)
      // console.log(list, 'list')
      load()
    })
  
  
    // 删除
    $('#todolist,#donelist').on('click', 'li>a', function () {
      let index = $(this).parents('li').data().id
      // console.log(index)
      let list = getData() // 先获取数据
  
      list.splice(index, 1)  // 删除对应数据
  
      saveData(list) // 保存 更新到本地
  
      load()  // 渲染
    })
  })


